import { withI18n, Trans } from '@lingui/react'
//import { Form } from 'antd'
import React, { Fragment, PureComponent } from 'react'
import PropTypes from 'prop-types'
import { DescriptionList } from 'ant-design-pro'
import { Page } from 'components'
import {
  Spin,
  Empty,
  Radio,
  Typography,
  DatePicker,
  Button,
  Icon,
  Tooltip,
  Table,
} from 'antd'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import 'echarts-gl'
import styles from '../index.less'
import moment from 'moment'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker
const { Paragraph } = Typography
const { Description } = DescriptionList

const datetoday = moment().format('YYYY-MM-DD')

@withI18n()
class DataForm extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      whichone: 'v',
      isoneday: false,
    }
  }

  ismultidataaccess = () => {
    const { laterdata } = this.props
    const targdata =
      laterdata &&
      laterdata[this.state.whichone] &&
      laterdata[this.state.whichone].length > 0
    return targdata
  }

  render() {
    const {
      i18n,
      data,
      deviceid,
      Imei,
      getdataform,
      dtfstartdate,
      dtfenddate,
      updateHistoryDate,
      laterdata,
      loading,
      dataform,
      exportExcel,
    } = this.props
    const { whichone, isoneday } = this.state
    // v: i18n.t`Voltage`,
    //   e: i18n.t`Electric Current`,
    //   p: i18n.t`Power`,
    //   tp: i18n.t`Plate Temperature`,
    //   pv_v: i18n.t`Solar charging Voltage`,
    //   led_v: i18n.t`Lamp Voltage`,
    const columns = [
      {
        title: <Trans>Date</Trans>,
        dataIndex: 'strindexs',
        key: 'strindexs',
        width: 100,
        sorter: (a, b) => a.index - b.index,
        defaultSortOrder: 'descend',
      },
      {
        title: <Trans>Voltage</Trans>, //电池电压
        dataIndex: 'V',
        key: 'V',
        width: 100,
      },
      {
        title: <Trans>Electric Current</Trans>, //电流
        dataIndex: 'E',
        key: 'E',
        width: 100,
      },
      {
        title: <Trans>Solar charging Voltage</Trans>, //太阳能充电电压
        dataIndex: 'PV_V',
        key: 'PV_V',
        width: 100,
      },
      {
        title: <Trans>Plate Temperature</Trans>, //板子温度
        dataIndex: 'TP',
        key: 'TP',
        width: 100,
      },
      {
        title: <Trans>Lamp Voltage</Trans>, //Lamp Voltage
        dataIndex: 'LED_V',
        key: 'LED_V',
        width: 100,
      },
      {
        title: <Trans>Power</Trans>, //功率
        dataIndex: 'P',
        key: 'P',
        width: 100,
      },
    ]
    return (
      <Page inner>
        <DescriptionList
          size="large"
          title={
            <span>
              <b>
                <Trans>Equipment report history data sheet</Trans>
              </b>
              {/* &nbsp;&nbsp;
              <Icon type="info-circle" style={{ fontSize: '10px' }} />
              &nbsp;
              <span style={{ fontSize: '10px' }}>
                <Trans>Data reported 24 hours ago</Trans>
              </span> */}
            </span>
          }
        >
          <Spin spinning={loading}>
            <div
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginLeft: '10px',
                marginRight: '10px',
                marginBottom: '10px',
              }}
            >
              <Radio.Group
                value={whichone}
                onChange={e => {
                  this.setState({ whichone: e.target.value })
                }}
                style={{ marginRight: 5 }}
              >
                <RangePicker
                  value={[
                    moment(dtfstartdate, 'YYYY-MM-DD'),
                    moment(dtfenddate, 'YYYY-MM-DD'),
                  ]}
                  placeholder={i18n.t`Select Time`}
                  format={'YYYY-MM-DD'}
                  onChange={dates => {
                    getdataform(
                      dates[0] ? dates[0].format('YYYY-MM-DD') : undefined,
                      dates[1] ? dates[1].format('YYYY-MM-DD') : undefined
                    )
                  }}
                  ranges={{
                    今天: [moment(), moment()],
                    本月: [moment().startOf('month'), moment().endOf('month')],
                  }}
                />
              </Radio.Group>
              <Button
                onClick={e => {
                  exportExcel()
                }}
                type="primary"
                disabled={!dtfstartdate || !dtfenddate}
              >
                <Icon type="download" />
                &nbsp;<Trans>Export</Trans>
              </Button>
            </div>
            <Table
              size={'small'}
              dataSource={dataform}
              columns={columns}
              pagination={{
                showQuickJumper: true,
                showSizeChanger: true,
                showTotal: total => i18n.t`Total ${total} Items`,
              }}
              footer={data => {
                return (
                  <div>
                    <b>朗越能源</b>© 版权所有
                  </div>
                )
              }}
            />
          </Spin>
        </DescriptionList>
      </Page>
    )
  }
}

// DataForm.propTypes = {
//   onAdd: PropTypes.func,
//   //form: PropTypes.object,
//   filter: PropTypes.object,
//   onFilterChange: PropTypes.func,
// }

export default DataForm
